<template>
  <el-card style="padding: 0;margin-bottom: 5px" v-for="item in repliedArr">
    <template #header>
      <el-row>
        <el-col :span="19">
          <div style="font-size: 24px;
                    width:500px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;"
          >
            {{item.title}}
          </div>
        </el-col>
        <el-col :span="5" style="margin:auto;">
                  <span>
                    {{item.createTime}}
                  </span>
        </el-col>
      </el-row>
    </template>
    <div style="display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;"
    >
      {{item.content}}
    </div>
    <template #footer>
      <el-row>
        <el-col :span="5">
          <el-button :type="item.likesStatus" :icon="Pointer" @click="change(item)">
            点赞
            <span style="margin-left: 5px">
              {{item.likes}}
            </span>
          </el-button>
        </el-col>
        <el-col :span="5"><el-button :icon="ChatLineSquare">评论</el-button></el-col>
        <el-col :span="5">
          <el-button :type="item.favoritesStatus" :icon="Star" @click="change1(item)">
            收藏
            <span style="margin-left: 5px">
              {{item.favorites}}
            </span>
          </el-button>
        </el-col>
        <el-col :offset="4" :span="5">
          <el-button :icon="View">
          浏览量
          <span style="margin-left: 5px">
            {{item.views}}
          </span>
          </el-button>
        </el-col>
      </el-row>
    </template>

  </el-card>
</template>
<script setup>

import {ChatLineSquare, Pointer, Star, View} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//获取用户登录信息
let user = getUser();
// console.log("登录用户的个人信息："+user.nickname);


//定义变量，保存文章id和用户id
let likeFavoritesStatus = {articleId:'',userId:''};
//点击点赞按钮改变状态
const change = (item)=>{
  likeFavoritesStatus.articleId = item.id;
  likeFavoritesStatus.userId = item.userId;
  likeFavoritesStatus.likes = item.likes;
  let data = qs.stringify(likeFavoritesStatus);
  if (item.likesStatus!=''){
    axios.post(BASE_URL+'/v1/personal/article/likesStatus',data).then((response)=>{
      if (response.data.code == 2000){
        item.likesStatus='';
        item.likes = item.likes - 1;
        ElMessage.success('取消点赞');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }else {
    axios.post(BASE_URL+'/v1/personal/article/likesStatus',data).then((response)=>{
      if (response.data.code == 2000){
        item.likesStatus='primary';
        item.likes =  Number(item.likes) + 1;
        ElMessage.success('已点赞');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
//点击收藏按钮改变状态
const change1 = (item)=>{
  likeFavoritesStatus.articleId = item.id;
  likeFavoritesStatus.userId = item.userId;
  likeFavoritesStatus.favorites = item.favorites;
  let data = qs.stringify(likeFavoritesStatus);
  console.log('文章点赞数量='+data);
  if (item.favoritesStatus!=''){
    axios.post(BASE_URL+'/v1/personal/article/favoriteStatus',data).then((response)=>{
      if (response.data.code == 2000){
        item.favoritesStatus='';
        item.favorites = item.favorites - 1;
        ElMessage.success('取消收藏');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }else {
    axios.post(BASE_URL+'/v1/personal/article/favoriteStatus',data).then((response)=>{
      if (response.data.code == 2000){
        item.favoritesStatus='primary';
        item.favorites = Number(item.favorites) + 1;
        ElMessage.success('已收藏');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//定义变量，保存回答数据
const repliedArr = ref([]);
//定义变量，保存查询用户发布文章的条件
let search = {userId:'',questionId:''};
//加载回答数据
const loadReplied = ()=>{
  search.userId = user.id;
  search.questionId = 1;
  search.status = 1;
  let data = qs.stringify(search);
  axios.get(BASE_URL+'/v1/personal/replied/loadReplied?'+data).then((response)=>{
    if (response.data.code === 2000){
      repliedArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

  ////加载页面就查询用户发布的文章
onMounted(()=>{
  loadReplied();
})
</script>


<style scoped>

</style>